<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="添加公告"
    width="900"
    style="height: 700px"
    :before-close="reset"
  >
    <div>
      <div style="display: flex">
        <div class="item">
          <div class="citem"><span style="color: red">*</span>公告标题</div>
          <el-input
            placeholder="请输入公告标题"
            style="width: 240px"
            @blur="handlerInput"
            v-model="notice.model"
          ></el-input>
        </div>
        <div class="item">
          <div class="citem"><span style="color: red">*</span>公告类型</div>
          <el-select
            v-model="notice.title"
            placeholder="选中公告类型"
            style="width: 180px"
            @blur="handlerInput"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.title"
            />
          </el-select>
        </div>
      </div>
      <div style="margin-top: 10px" class="item">
        <div class="citem">状态</div>
        <el-radio-group v-model="notice.status">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">关闭</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-top: 10px; height: 500px" class="item">
        <div class="citem">内容</div>
        <div id="editor-main">
          <MdEditor
            :preview="false"
            v-model="content"
            noMermaid
            @on-blur="save"
            noKatex
            style="width: 700px"
            :toolbars="markconfig.arr"
            placeholder="请输入公告内容..."
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { inject, ref } from 'vue'
import { MdEditor } from 'md-editor-v3'
import markconfig from '@/util/markconfig.js'
import { ElNotification } from 'element-plus'
import 'md-editor-v3/lib/style.css'
import request from '@/util/request'

const dialogFormVisible = ref(false)
const options = ref([
  {
    title: '公告',
    label: '公告'
  },
  {
    title: '通知',
    label: '通知'
  }
])
const content = ref('')

const save = () => {
  console.log(content.value)
}

const notice = ref({
  title: '',
  model: '',
  content: '',
  status: 0
})
const refresh = inject('refresh')
const reset = () => {
  notice.value = {
    title: '',
    model: '',
    content: '',
    status: 0
  }

  content.value = ''

  dialogFormVisible.value = false
}

const submit = () => {
  notice.value.content = content.value
  console.log('提交的通知', notice.value)

  request
    .post('/admin/notice/insert', notice.value)
    .then((res) => {
      ElNotification.success('添加成功')
      let ws = new WebSocket('ws://localhost:8080/socket/common')
      ws.onopen = () => {
        ws.send(JSON.stringify(notice.value))
      }
      setTimeout(() => {
        reset()
      }, 500)
      refresh()
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const open = () => {
  dialogFormVisible.value = true
}

defineExpose({
  open
})
</script>

<style scoped>
.item {
  margin-right: 20px;
  display: flex;
  height: 30px;
  line-height: 30px;
}

.citem {
  margin-right: 10px;
  width: 65px;
  text-align: right;
}

#editor-main {
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
</style>
